<template lang="pug">
.ele-list
  a-collapse(
    v-model:activeKey="activeKey"
    :bordered="false"
    style='background:#fff;')
    a-collapse-panel(
      v-for="(item, index) in list"
      :key="index"
      :header="item.label")
      vuedraggable(
        tag="div"
        class="component-list"
        :list="item.list || []"
        :group="{name: 'people', pull: 'clone', put: false}"
        :sort="false"
        :ghostClass="'ghost'")
        .item(
          v-for="(itm, idx) in (item.list || [])"
          :key="idx")
          component(:is="itm.icon" v-if="itm.icon")
          span.label {{itm.label}}
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from "vue";
import eleList from "../json/eleList";
import { VueDraggableNext } from "vue-draggable-next";
export default defineComponent({
  name: "",
  components: {
    vuedraggable: VueDraggableNext,
  },
  setup() {
    // 默认全部展开
    const activeKey = ref([0, 1, 2, 3]);
    const list: Array<any> = reactive(eleList);
    return {
      list,
      activeKey,
    };
  },
});
</script>

<style lang="stylus" scoped>
.ele-list {
  padding: 0 10px;
  width: 240px;
  min-width: 240px;
  border-right: solid 1px #e6e6e6;
  .component-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left 0px;
    .item {
      min-width: 90px;
      border: 1px solid #e3e6eb;
      height: 36px;
      border-radius: 3px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      margin-top: 5px;
      cursor: pointer;
      .label {
        margin-left: 10px;
      }
    }
  }
}
</style>
